@page
@{ Layout = "_Layout"; }
@section Styles{
    <link href="/sitefiles/assets/css/bootstrap-4.1.0.min.css" rel="stylesheet" type="text/css" />
    <link href="/sitefiles/assets/css/xblms.min.css" rel="stylesheet" type="text/css" />
    <link href="/sitefiles/assets/lib/geeks/css/theme.min.css" rel="stylesheet" type="text/css" />
    <style>
        .ion-person:before,
        .ion-locked:before,
        .ion-image:before,
        .ion-ipad:before,
        .ion-chatbubble:before {
            width: 16px;
            font-size: 18px;
        }

        html {
            overflow: hidden;
        }

        .wrapper-page {
            max-width: 399px;
            margin:58px auto;
        }
    </style>
}

<div class="wrapper-page">
    <div class="mb-5 text-center">
        <div class="h1 fw-bold">{{ DOCUMENTTITLECN }}</div>
    </div>
    <el-card style="box-shadow:0 0 16px 2px rgba(102,0,255,0.25);">
        <div slot="header" class="clearfix">
            <el-row style="display:flex;align-items:center;justify-content:space-between;">
                <el-col :span="16">
                    <div class="fw-bold">
                        管理后台-请登录
                    </div>
                </el-col>
                <el-col :span="6" style="text-align:right;">
                    <img :src="DEFAULT_LOGO_URL" width="66" />
                </el-col>
            </el-row>
        </div>
        <div>
            <form v-on:submit="btnSubmitClick" class="form-horizontal" method="post">
                <template v-if="pageAlert">
                    <div class="alert fs-5 py-2 px-3" :class="{ 'alert-warning': pageAlert.type === 'warning', 'alert-success': pageAlert.type === 'success', 'alert-danger': pageAlert.type === 'danger' }">
                        <span v-html="pageAlert.html"></span>
                    </div>
                </template>

                <template>
                    <div class="form-group row">
                        <div class="col-12">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-user-circle-o"></i>
                                    </span>
                                </div>
                                <input v-model="account" :class="{ 'is-invalid': pageSubmit && !account }" class="form-control" type="text"
                                       v-focus placeholder="请输入用户名" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-12">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-key"></i>
                                    </span>
                                </div>
                                <input v-model="password" :class="{ 'is-invalid': pageSubmit && !password }" class="form-control"
                                       type="password" placeholder="请输入密码" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div v-if="!isAdminCaptchaDisabled" class="form-group row">
                        <div class="col-12">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-picture-o"></i>
                                    </span>
                                </div>
                                <input v-model="captchaValue" :class="{ 'is-invalid': pageSubmit && !captchaValue }" class="form-control" type="text"
                                       placeholder="请输入验证码">
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-6">
                            <el-checkbox v-model="isPersistent">下次自动登录</el-checkbox>
                        </div>
                        <div class="col-6">
                            <a v-if="!isAdminCaptchaDisabled" href="javascript:;" v-on:click="btnCaptchaClick">
                                <img v-show="captchaUrl" style="display: none" class="float-right rounded" :src="captchaUrl" align="absmiddle">
                            </a>
                        </div>
                    </div>

                </template>

                <div class="form-group row">
                    <div class="col-12">
                        <div class="p-2 bg-light rounded-pill">
                            <el-button plain type="primary" v-on:click="btnSubmitClick" class="w-100 py-3 rounded-pill" icon="el-icon-s-promotion">登 录</el-button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </el-card>
    <div class="text-muted text-center fs-5" style="margin-top:18px;">
        <small>{{ DOCUMENTTITLE }}<span class="ms-2 text-warning">v{{ version }}</span></small>
    </div>
</div>

@section Scripts{
    <script src="/sitefiles/assets/lib/md5-2.10.0.min.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/admin/login.js" type="text/javascript"></script>
}